<!--button-->
<section id="button">
    <h1 class="demo-title">button</h1>
    <div class="demo-panel">
        <h6>普通小按钮</h6>
        <div class="layout-flex">
            <div class="col-flex-1 pr20">
                <pre lang-prism class="language-html">
                    <code class="language-html">
                        &lt;button class="btn btn-xs btn-bg-blue"&gt;确定&lt;/button&gt;
                        &lt;button class="btn btn-xs btn-text-blue"&gt;取消&lt;/button&gt;
                        &lt;button class="btn btn-xs"&gt;分类&lt;/button&gt;
                        &lt;button class="btn btn-xs btn-border-blue"&gt;分类&lt;/button&gt;
                    </code>
                </pre>
            </div>
            <div>
                <div class="device-bg">
                    <div class="device-content">
                        <div class="layout-flex layout-flex-pack-center">
                             <button class="btn btn-xs btn-bg-blue">确定</button>
                            &nbsp;&nbsp;
                            <button class="btn btn-xs btn-text-blue">取消</button>
                            &nbsp;&nbsp;
                            <button class="btn btn-xs">分类</button>
                            &nbsp;&nbsp;
                            <button class="btn btn-xs btn-border-blue">分类</button>
                        </div>
                        <div class="layout-flex">
                            <button class="btn-standard btn-standard-primary">查看考试</button>
                            <button class="btn-standard btn-standard-txt-primary">查看考试</button>
                            <button class="btn-standard btn-standard-primary" disabled>查看考试</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <h6>普通大按钮</h6>
        <div class="demo-button">
            <ul>
                <li>
                    <button class="btn btn-lg btn-text-blue">确定</button>
                </li>
                <li>
                    <button class="btn btn-lg btn-disable">取消</button>
                </li>
                <li>
                    <button class="btn btn-lg btn-bg-grey">取消</button>
                </li>
            </ul>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;ul&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-text-blue"&gt;确定&lt;/button&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-disable"&gt;取消&lt;/button&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-bg-grey"&gt;取消&lt;/button&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code>
        </pre>
        <br>
        <h6>蓝色大按钮</h6>
        <div class="demo-button">
            <ul>
                <li>
                    <span>焦点状态效果</span>
                    <button class="btn btn-lg btn-bg-blue">确定</button>
                </li>
                <li>
                    <span>点击后效果</span>
                    <button class="btn btn-lg btn-bg-grey">确定</button>
                </li>
            </ul>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;ul&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-bg-blue"&gt;确定&lt;/button&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-bg-grey"&gt;确定&lt;/button&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code>
        </pre>
        <br>
        <h6>红色强调大按钮和点击效果</h6>
        <div class="demo-button">
            <ul>
                <li>
                    <span>焦点状态效果</span>
                    <button class="btn btn-lg btn-bg-red">确定</button>
                </li>
                <li>
                    <span>点击后效果</span>
                    <button class="btn btn-lg btn-bg-grey">确定</button>
                </li>
            </ul>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;ul&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-bg-red"&gt;确定&lt;/button&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;button class="btn btn-lg btn-bg-grey"&gt;确定&lt;/button&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code>
        </pre>
        <br>
        <h6>底部并排按钮</h6>
        <div class="demo-button">
            <ul>
                <li>
                    <span>并排三个</span>
                    <div class="row-flex">
                        <button class="btn btn-flex-1 btn-text-blue">取消</button>
                        <button class="btn btn-flex-1 btn-bg-red">购买</button>
                        <button class="btn btn-flex-1 btn-bg-blue">同意</button>
                    </div>
                </li>
                <li>
                    <span>并排两个</span>
                    <div class="row-flex">
                        <button class="btn btn-flex-1 btn-bg-red">购买</button>
                        <button class="btn btn-flex-1 btn-bg-blue">同意</button>
                    </div>
                </li>
            </ul>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;ul&gt;
                    &lt;li&gt;
                        &lt;span&gt;并排三个&lt;/span&gt;
                        &lt;div class="row-flex"&gt;
                            &lt;button class="btn btn-flex-1 btn-text-blue"&gt;取消&lt;/button&gt;
                            &lt;button class="btn btn-flex-1 btn-bg-red"&gt;购买&lt;/button&gt;
                            &lt;button class="btn btn-flex-1 btn-bg-blue"&gt;同意&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;span&gt;并排两个&lt;/span&gt;
                        &lt;div class="row-flex"&gt;
                            &lt;button class="btn btn-flex-1 btn-bg-red"&gt;购买&lt;/button&gt;
                            &lt;button class="btn btn-flex-1 btn-bg-blue"&gt;同意&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code>
        </pre>
        <br>
        <h6>淘宝购买按钮</h6>
        <div class="demo-button">
            <div class="demo-button-buy">
                <div class="buy-bottom">
                    <span class="cache-bottom">
                        <i class="fa fa-star-o"></i><br>店铺
                    </span>
                    <span class="cache-bottom">
                        <i class="fa fa-star-o"></i><br>收藏
                    </span>
                    <button class="btn btn-bg-blue btn-bottom-buy">立即购买</button>
                    <button class="btn btn-bg-red btn-bottom-buy">免费试看</button>
                </div>
            </div>
        </div>
        <pre lang-prism class="language-html">
            <code class="language-html">
                &lt;div&gt;
                    &lt;span class="cache-bottom"&gt;
                        &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;br&gt;店铺
                    &lt;/span&gt;
                    &lt;span class="cache-bottom"&gt;
                        &lt;i class="fa fa-star-o"&gt;&lt;/i&gt;&lt;br&gt;店铺
                    &lt;/span&gt;
                    &lt;button class="btn btn-bg-blue btn-bottom-buy"&gt;立即购买&lt;/button&gt;
                    &lt;button class="btn btn-bg-red btn-bottom-buy"&gt;免费试看&lt;/button&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
</section>
